<template>
  <div class="home">
    <!-- v-for可以循环对象 -->
    <div v-for="(item,index) of musics" :key="item.title">
      <h4  @click="handleDetail(index)">{{item.title}}</h4>
      <div class="container">
        <Music-item 
          v-for="val of item.res" 
          :key="val.id" :item="val" 
          @toggle="handleToggle(val.id,val.name)">
        </Music-item>
      </div>
    </div>
  </div>
</template>

<script>
import MusicItem from '../../components/music/MusicItem.vue'
import HomeHttp from '../../models/HomeHttp'
export default {
  name: 'Home',
  data() {
    return {
      musics:{ }
     
    }
  },
  components:{
    MusicItem
  },
  methods: {
    handleToggle(id,name){
      console.log(id)
      /* 传到store/mutations */
      this.$store.commit("changeName",name)
      this.$router.push(`/detail/${id}`)
    },
    handleDetail(index){
      console.log(index);
      this.$router.push(`/more?value=${index}`)
    }
  },
  async mounted(){
    try{
      var Hots = await HomeHttp.getHotMusic();
      var News = await HomeHttp.getNewMusic();
      var DJs = await HomeHttp.getDj();
      this.musics ={
        Hots:{
          title:'热门音乐',
        res:Hots.data.playlists.slice(0,3)
        },
        News:{
          title:'最新音乐',
        res:News.data.albums.slice(0,3)
        },
        DJs:{
          title:'主播电台',
        res:DJs.data.result.slice(0,3)
        }
      }
    }catch(err){
      // console.log(err);
    }
    
  }
}
</script>
<style scoped>
h4{
  line-height: 40px;
}
</style>
